import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { Row, Col, Checkbox } from 'antd';

const styles = {
	wrapper: {
    height: '100%',
    background: '#f7f7f7',
    width: 250,
    overflow: 'auto'
	},
	wrapperView: {
		display: 'none'
	}
}

export default class FieldSelector extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {

	}
	handleChangeCheckbox = (type, value) => {
		const newState = {[type]: value};
		this.props.updateState(newState);
	}
	render() {
		const {handleType, dataSourcelist, uri, columns} = this.props;
		const originFields = dataSourcelist.find(item => item.storePath === uri) && dataSourcelist.find(item => item.storePath === uri).columns || []
		const checkValues = columns.map(item => item.columnName);
		return (
			<div style={handleType === 'view' ? styles.wrapperView : styles.wrapper}>
				<Row style={{padding: '20px 0px', fontSize: 20, textAlign: 'center', borderBottom: '1px solid #eee'}}>
					原始字段名
				</Row>
				<Checkbox.Group value={checkValues} onChange={this.handleChangeCheckbox.bind(null, 'columns')}>
					{originFields.map(item => <Checkbox key={item.name} value={item.name}>{item.name}</Checkbox>)}
				</Checkbox.Group>
			</div>
		)
	}
}
